<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-07-05 23:10:53
 * @Description: 
-->
<template>
    <div class="index-container" :style="`height:${view.height}px;background:${isDark ? '#1B1B1F' : '#fff'};`">
        <div class="header-container">
            <div class="header-main">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                    @select="handleSelect" router>
                    <h1 class="logo">
                        <el-image style="width: 40px; height: 40px" :src="logo" alt="Element logo" fit="scale-down" />
                        <div class="tit" :style="`color:${!isDark ? '#1B1B1F' : '#fff'};`">无人机现场执法客户端软件</div>
                    </h1>
                    <div style="height: 60px;line-height:60px;margin-left: 10px;"><el-button type=""
                            :icon="MenuStateStore.isCollapse ? Expand : Fold"
                            @click="MenuStateStore.setCollapse(!MenuStateStore.isCollapse)" /></div>
                    <div class="flex-grow"></div>
                    <el-menu-item index="/index/general">算法管理通用配置</el-menu-item>
                    <div class="flex-grow"></div>
                    <el-menu-item>用户管理</el-menu-item>
                    <el-menu-item>系统日志</el-menu-item>
                    <el-menu-item>
                        <el-switch v-model="value1" :disabled="true" :active-action-icon="Moon"
                            :inactive-action-icon="Sunny" size="large" active-text="黑暗" inactive-text="明亮"
                            @click="darkModeHandler()" />
                    </el-menu-item>
                    <el-sub-menu index="">
                        <template #title>
                            <div>
                                <span>管理员</span>&nbsp;
                                <el-avatar :icon="UserFilled" :size="30" />
                            </div>
                        </template>
                        <el-menu-item>用户中心</el-menu-item>
                        <el-menu-item>消息管理</el-menu-item>
                        <el-menu-item>系统设置</el-menu-item>
                        <el-menu-item @click="exitHandler">退出登录</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { useDark, useToggle } from '@vueuse/core'
import {
    Sunny, Moon, UserFilled, Document,
    Menu as IconMenu, Menu, Fold,
    Location, Edit, Expand, ArrowRight,
    Setting, Connection,
} from '@element-plus/icons-vue'
import logo from '@/assets/logo/logo.png'
import * as _ from "lodash";
import { useMenuStateStore } from "@/store/page";
import { useRoute } from 'vue-router'
import router from "@/router";
// import { ElMessage, ElMessageBox } from "element-plus";
let isDark = ref(useDark())
let value1 = ref(useDark())
const route = useRoute();

const toggleDark = useToggle(isDark)
const MenuStateStore: any = useMenuStateStore()
var view = reactive({
    height: window.innerHeight,
});
window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100);
const activeIndex = ref(route.matched[1].path)
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const darkModeHandler = function () {
    toggleDark()
    // value1.value=!isDark
}
const exitHandler =function(){
    router.push('/login')
}

</script>
<style lang="scss" scoped>
.flex-grow {
    flex-grow: 1;
}

.index-container {
    transition: all 1s;
}

.header-container {
    display: flex;
    justify-content: center;

    .header-main {
        width: 100%;
        min-width: 1482px;
        padding: 0 20px;

        .logo {
            display: flex;
            align-items: center;

            .tit {
                margin-left: 20px;
                font-size: 20px;
                font-weight: 500;
            }
        }
    }
}

.body-container {
    display: flex;
    justify-content: center;

    .body-main {
        width: 100%;
        min-width: 1482px;
        display: flex;

        .side-container {
            width: 300px;
            overflow: scroll;
        }

        .body-warp {
            width: 100%;
            padding: 0 30px;

            .breadcrumb-container {
                height: 60px;
                width: 100%;
                display: flex;
                align-items: center;
            }

            .body-inner {
                height: calc(100% - 80px);
                width: 100%;
            }
        }
    }
}
</style>
<style lang="scss">
.el-menu {
    border-right: 0;
}

.el-menu-item [class^=el-icon] {
    margin: 0;
}

.el-switch--large {
    line-height: 20px;
}

.el-sub-menu__title * {
    vertical-align: middle;
}

.el-sub-menu .el-icon {
    margin: 0;
}

.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
    cursor: pointer;
}

.el-switch.is-disabled {
    transition: all 1s;
    opacity: 1;
}

.side-container {
    .el-card__body {
        padding: 20px 0;
    }
}
</style>